<template>
  <div
      class="scrollBody"
      ref="scrollBody"
      @mouseenter="tBmouseenter"
      @mouseleave="tBmouseleave"
      @touchstart="tTouchstart"
      @touchend="tTouchend"
  >
    <slot></slot>
    <slot v-if="isScroll"></slot>
  </div>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from "vue";

const scrollBody = ref();

let theInterval;

const isScroll = ref(true);

const setRoll = () => {
  clearInterval(theInterval);
  theInterval = setInterval(() => {
    const isBottoming =
        scrollBody.value?.scrollTop + 1 >= scrollBody.value?.scrollHeight / 2;
    if (!isBottoming) {
      scrollBody.value?.scrollTo(0, scrollBody.value.scrollTop + 1);
    } else {
      scrollBody.value?.scrollTo(0, 1);
    }
  }, 50);
};

const tBmouseenter = () => {
  clearInterval(theInterval);
  theInterval = undefined;
};

const tBmouseleave = () => {
  setRoll();
};

const tTouchstart = () => {
  tBmouseenter();
};

const tTouchend = () => {
  tBmouseleave();
};

onMounted(() => {
  nextTick(() => {
    isScroll.value =
        scrollBody.value?.clientHeight <= scrollBody.value?.scrollHeight;
    if (!isScroll.value) return;
    setRoll();
  });
});

onUnmounted(() => {
  tBmouseenter();
});
</script>

<style scoped lang="less">
.scrollBody {
  height: 100%;
  overflow-y: auto;
  width: 100%;
}

.scrollBody::-webkit-scrollbar {
  width: 0;
}
</style>
